<template>
  <div>
    <a-form
        auto-label-width
        ref="loginForm"
        :model="form"
        :rules="rules"
        @submit="handleSubmit"
        size="large"
        style="margin-top: 10px"
    >
      <a-form-item
          label="账&nbsp;&nbsp;&nbsp;&nbsp;号"
          field="userAccount"
          validate-trigger="blur"
      >
        <a-input
            v-model="form.userAccount"
            :max-length="12"
            show-word-limit
            placeholder="请输入账号"
            allow-clear
        />
      </a-form-item>
      <a-form-item
          label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
          field="userPassword"
          validate-trigger="blur"
      >
        <a-input-password
            v-model="form.userPassword"
            placeholder="请输入密码"
            :max-length="30"
            show-word-limit
            allow-clear
        />
      </a-form-item>
      <a-row :gutter="24">
        <a-col :span="14">
          <a-form-item
              field="captcha"
              label="验证码"
              validate-trigger="blur"
          >
            <a-verification-code
                v-model="form.captcha"
                :length="4"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-tooltip content="点击图片刷新" placement="top">
            <img
                :src="captcha.captchaImage"
                style="width: 100%;border: 1px solid #ccc"
                alt=""
                @click="getCaptcha()"
            >
          </a-tooltip>
        </a-col>
      </a-row>
      <a-button
          html-type="submit"
          style="margin: 20px 0"
          type="primary"
          long
      >
        立即登录
      </a-button>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import request from "../axios/axios";
  import { Message } from '@arco-design/web-vue';
  import {nextTick, onMounted, ref} from "vue";
  import router from "../router";

  const loginForm = ref()

  const captcha = ref({
    captchaId: "",
    captchaImage: ""
  })

  const form = ref({
    userAccount: "",
    userPassword: "",
    captcha: ""
  })

  onMounted(() => {
    getCaptcha()
  })

  const getCaptcha = () =>{
    request.get("/api/auth/captcha").then(res => {
        captcha.value.captchaId = res.data.data.captchaId
        captcha.value.captchaImage = "data:image/gif;base64," + res.data.data.captchaImage
    })
  }

  const rules = {
    userAccount: [
      {required: true, message: "请输入账号", trigger: "blur"},
      {length: 12, message: "长度为12个字符", trigger: "blur"}
    ],
    userPassword: [
      {required: true, message: "请输入密码", trigger: "blur"},
      {minLength: 6, maxLength: 30, message: "长度至少 6 个字符", trigger: "blur"}
    ],
    captcha: [
      {required: true, message: "请输入验证码", trigger: "blur"},
      {length: 4, message: "长度为4个字符", trigger: "blur"}
    ]
  }

  const handleSubmit = ({values, errors}) => {
    if (errors){
      Message.error("请将信息填写完整")
      return
    }
    request.post("/api/auth/login", {
      captcha: {
        captchaId: captcha.value.captchaId,
        captchaValue: form.value.captcha
      },
      userAccount: form.value.userAccount,
      userPassword: form.value.userPassword
    }).then(res => {
      if (res.data.success === true){
        Message.success("登录成功！")
        localStorage.setItem("token", res.data.data.token)
        nextTick(() => {
          router.replace("/")
        })
      }else {
        form.value.captcha = ""
        getCaptcha()
      }
    })
  }
</script>

<style scoped>

</style>
